<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
    <meta http-equiv="content-type" content="textml" charset="utf-8">
    <title>小球弹跳</title>
    <meta name="Keywords" content="transition, animation">
    <meta name="Description" content="transition + animation">
    <link rel="stylesheet" media="screen" href="css/clean.css">
    <link rel="stylesheet" media="screen" href="css/main.css">
    <link rel="stylesheet" media="screen" href="css/header.css">
    <link rel="stylesheet" media="screen" href="css/section.css">
</head>
<body>
    <header>
        <div class='header-area'>
            <ul class='header-width-set'>
                <li>
                    <div class='tips'></div>
                    <span>Theme: transition + animation</span>
                </li>
                <li>
                    <div class='tips'></div>
                    <span>Email: socovo@live.com</span>
                </li>
                <li>
                    <div class='tips'></div>
                    <span>Name: 宋臣</span>
                </li>
            </ul>
        </div>
    </header>
    <main class='bg-color'>
        <section>
            <ul class='flex-container'>
                <li class='flex-items'></li>
                <li class='flex-items'></li>
                <li class='flex-items'></li>
                <li class='flex-items'></li>
            </ul>
            <ul class='shadow-container'>
                <li class='shadow-li'>
                    <div class='shadow-items'></div>
                </li>
                <li class='shadow-li'>
                    <div class='shadow-items'></div>
                </li>
                <li class='shadow-li'>
                    <div class='shadow-items'></div>
                </li>
                <li class='shadow-li'>
                    <div class='shadow-items'></div>
                </li>
            </ul>
        </section>
    </main>
</body>
</html>